import React, { memo, useEffect } from 'react';
import { headerLinks } from '@/common/local-data'

import { NavLink } from 'react-router-dom';
import { SearchOutlined, UserOutlined,MailOutlined,CrownOutlined,SketchOutlined, PoweroffOutlined,SettingOutlined, SafetyCertificateOutlined } from '@ant-design/icons'
import { Input, Modal,message } from 'antd'
import { HeaderLeft, HeaderRight, HeaderWrapper } from './style'
import Login from '../login';
import { shallowEqual, useDispatch, useSelector } from 'react-redux';
import { changeExitAction, changeshowModalActiom } from '../login/store/actionCreators';
import { getSizeImage } from '../../tools/data_format';
import Register from '../login/phone-login/register';
const AppHeader = memo(() => {
    // state and props 

    // Hooks
    const dispatch = useDispatch()
    const { liginSucceedInfo} = useSelector((state) => {
        return {
            visible: state.getIn(["login", "visible"]),
            liginSucceedInfo:state.getIn(["login","liginSucceedInfo"])
        }
    }, shallowEqual)
    useEffect(()=>{
    },[liginSucceedInfo])
    //页面代码  前三个是路由连接 后面是超链接
    const showSelectItem = (item, index) => {
        if (index < 3) {
            return (
                <NavLink to={item.link} exact>
                    {item.title}
                    <i className="sprite_01 icon"></i>
                </NavLink>
            )
        } else {
            return (
                <a href={item.link}>
                    {item.title}
                </a>
            )
        }
    }
    // function
    const login = (e) => {
        dispatch(changeshowModalActiom(true))
    }
    const { confirm } = Modal;
    const exit = () =>{
        confirm({
          title: "确定要退出吗",
          content: '退出后您将不能享受至尊VIP的服务了',
          okText: '退出',
          okType: 'danger',
          cancelText: '取消',
          onOk() {
            dispatch(changeExitAction())
            message.success('退出成功');
          },
          onCancel() {
            message.info('已取消');
          },
        });
      }
    return (
        <HeaderWrapper>
            <div className="content wrap-v1">
                <HeaderLeft>
                    <a href="/#" className="logo sprite_01">网易云音乐</a>
                    {/* 循环遍历出路由或者超链接 */}
                    <div className="select-list">
                        {
                            headerLinks.map((item, index) => {
                                return (
                                    <div key={item.title} className="select-itme">
                                        {showSelectItem(item, index)}
                                    </div>
                                )
                            })
                        }
                    </div>
                </HeaderLeft>
                <HeaderRight isLogin={liginSucceedInfo.code}>
                    <Input className="search" placeholder="音乐/视频/电台" prefix={<SearchOutlined />} />
                    <div className="center">创作中心</div>
                    <div className="login" onClick={e => login(e)}>登录</div>
                    <div className="logined">
                        <div className="portrait">
                            <img src={getSizeImage(liginSucceedInfo.profile?liginSucceedInfo.profile.avatarUrl:"https://p1.music.126.net/SUeqMM8HOIpHv9Nhl9qt9w==/109951165647004069.jpg",30)} alt=""/>
                        </div>
                        <i className="unread">2</i>
                        <div className="loginedList">
                            <div className="arrows">
                                <i></i>
                            </div>
                            <div className="me-homepage item">
                            <UserOutlined />
                                <p>我的主页</p>
                            </div>
                            <div className="me-info item">
                              <MailOutlined />
                                <p>我的信息</p>
                                <i>2</i>
                            </div>
                            <div className="me-hierarchy item">
                              <CrownOutlined />
                                <p>我的等级</p>

                            </div>
                            <div className="VIP item">
                            <SketchOutlined />
                                <p>VIP会员</p>
                            </div>
                            <div className="set item">
                            <SettingOutlined />
                                <p>个人设置</p>
                            </div>
                            <div className="Certification item">
                            <SafetyCertificateOutlined />
                                <p>实名认证</p>
                            </div>
                            <div className="exit item" onClick={exit} >
                            <PoweroffOutlined/>
                                <p>退出</p>
                            </div>
                        </div>
                    </div>
                    <Login></Login>
                    <Register></Register>
                </HeaderRight>
            </div>
            <div className="divider"></div>
        </HeaderWrapper>
    );
});

export default AppHeader;